<script setup lang="ts">
import { RouteLocationRaw } from 'vue-router'

const handleExit = () => {
  window.electron.ipcRenderer.send('close-window')
}

const handleMinimize = () => {
  window.electron.ipcRenderer.send('minimize-window')
}

const props = defineProps({
  hasBack: Boolean,
  backPath: String
})
</script>

<template>
  <!-- 操作按钮 -->
  <div class="h-7 flex flex-row">
    <div v-if="!props.hasBack" style="-webkit-app-region: drag" class="float-left h-7 flex-1"></div>
    <router-link v-if="props.hasBack" :to="props.backPath as RouteLocationRaw">
      <svg
        class="h-7 w-7 text-gray-500 hover:bg-gray-400 hover:cursor-pointer float-left"
        viewBox="0 0 1024 1024"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          d="M561.376 259.792a32 32 0 0 1 46.88 43.504l-1.632 1.744-203.648 203.632 203.648 203.664a32 32 0 0 1 1.632 43.504l-1.632 1.76a32 32 0 0 1-43.504 1.6l-1.76-1.6-226.256-226.288a32 32 0 0 1-1.632-43.504l1.632-1.76 226.272-226.256z"
          fill="#979797"
        ></path>
      </svg>
    </router-link>

    <div v-if="props.hasBack" style="-webkit-app-region: drag" class="float-left h-7 flex-1"></div>

    <svg
      class="h-7 w-7 text-gray-500 hover:bg-gray-400 hover:cursor-pointer float-right"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      @click="handleMinimize"
    >
      <path d="M4 10H16V9H4V10Z" />
    </svg>

    <svg
      class="h-7 w-7 text-gray-500 hover:bg-red-500 hover:cursor-pointer hover:text-white float-right"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 20 20"
      fill="currentColor"
      @click="handleExit"
    >
      <path
        fill-rule="evenodd"
        d="M14.348 14.849a1 1 0 01-1.414 0L10 11.414l-2.93 2.93a1 1 0 11-1.415-1.415l2.928-2.929-2.929-2.93a1 1 0 111.415-1.414l2.93 2.929 2.93-2.929a1 1 0 011.414 1.414l-2.93 2.93 2.93 2.93a1 1 0 010 1.415z"
        clip-rule="evenodd"
      />
    </svg>
  </div>
</template>

<style scoped></style>
